<template>
  <div>
    <Card>
      <Row>
        <!-- 培训通知 -->
        <i-col span="12" class="left">
          <div class="leftInfo" v-if="item.trainflag>=0">
            <div class="first">
              <div class="leftTitle">
                <div>
                  <Icon type="ios-list-box" class="titleIcon" />
                </div>
                <div class="titleInfo">培训通知</div>
                <div>
                  <Button
                    size="small"
                    :class="item.trainflag==='0'?'cardExtra cardExtra1':(item.trainflag==='1'?'cardExtra cardExtra2':'cardExtra cardExtra3')"
                  >{{item.trainflag==='0'?'无考核':(item.trainflag==='1'?"考核未结束":"考核已结束")}}</Button>
                </div>
              </div>
              <div class="messageInfo">
                <Row>
                  <i-col span="4" class="messageLabel">培训主题</i-col>
                  <i-col span="15">{{baseInfo?baseInfo.theme:''}}</i-col>
                </Row>
                <Row>
                  <i-col span="4" class="messageLabel">培训发起人</i-col>
                  <i-col span="15">{{baseInfo?baseInfo.originatorname:''}}</i-col>
                </Row>
                <Row>
                  <i-col span="4" class="messageLabel">培训发布日期</i-col>
                  <i-col span="15">{{baseInfo?baseInfo.maketime.substr(0,10):''}}</i-col>
                </Row>
                <Row>
                  <i-col span="4" class="messageLabel">培训管理机构</i-col>
                  <i-col span="15">{{baseInfo?baseInfo.managecom+'-'+baseInfo.managecomname:''}}</i-col>
                </Row>
                <Row>
                  <i-col span="4" class="messageLabel">培训内容概述</i-col>
                  <i-col span="15" class="omit">{{baseInfo?baseInfo.remark:''}}</i-col>
                </Row>
              </div>
            </div>
            <div class="second" v-if="item.trainflag>=1">
              <div class="messageTitle">考核信息</div>
              <div class="messageInfo">
                <Row>
                  <i-col span="4" class="messageLabel">答题起止期</i-col>
                  <i-col
                    span="15"
                  >{{baseInfo&&baseInfo.startdate?baseInfo.startdate.substr(0,10):''}}&nbsp;~&nbsp;{{baseInfo&&baseInfo.enddate?baseInfo.enddate.substr(0,10):''}}</i-col>
                </Row>
                <Row>
                  <i-col span="4" class="messageLabel">共计</i-col>
                  <i-col span="15">
                    <span
                      style="margin-right:15px"
                    >{{baseInfo.uerTrainQuestionNumberVO?baseInfo.uerTrainQuestionNumberVO.allquestions:''}}道题</span>
                    单选题：{{baseInfo.uerTrainQuestionNumberVO?baseInfo.uerTrainQuestionNumberVO.single:''}}道 多选题：{{baseInfo.uerTrainQuestionNumberVO?baseInfo.uerTrainQuestionNumberVO.multiple:''}}道 判断题：{{baseInfo.uerTrainQuestionNumberVO?baseInfo.uerTrainQuestionNumberVO.judge:''}}道
                  </i-col>
                </Row>
                <Row>
                  <i-col span="4" class="messageLabel">考核总分</i-col>
                  <i-col span="15">{{baseInfo?baseInfo.totalscore:''}}</i-col>
                </Row>
                <Row>
                  <i-col span="4" class="messageLabel">及格分数线</i-col>
                  <i-col span="15">{{baseInfo?baseInfo.passscore:''}}</i-col>
                </Row>
              </div>
            </div>
            <div class="third" v-if="item.trainflag>=2">
              <div class="thirdTitle">培训结果清单</div>
              <Table :data="resultData" :columns="resultColumns" size="small">
                <template slot-scope="{row}" slot="detail">
                  <span style="color:rgba(24, 144, 255, 1);cursor:pointer" @click="examModal">考核明细</span>
                </template>
              </Table>
              <Modal
                footer-hide="true"
                :value="examModalValue"
                :mask-closable="false"
                @on-visible-change="modalVisibleChange"
                width="1000"
              >
                <span slot="header" style="color:#fff;font-size:16px">考核明细</span>
                <Row gutter="40">
                  <i-col span="12">
                    <Card>
                      <div class="title">考核结果统计</div>
                      <div v-show="zhuzhuang">
                        <div id="c1"></div>
                      </div>
                    </Card>
                  </i-col>
                  <i-col span="12">
                    <Card>
                      <div class="title">员工清单</div>
                      <Table :data="employeeData" :columns="employeeColumns" max-height="305"></Table>
                    </Card>
                  </i-col>
                </Row>
              </Modal>
            </div>
            <!-- 无考核、考核未结束，，，，，这次不上 -->
            <!-- <div v-if="item.trainflag<2"> -->
              <!-- <Button :size="buttonSize" type="primary" @click="linkToChange()">变更培训</Button>
              <Button :size="buttonSize" type="primary" @click="cancelTrain()" style="margin-left:30px;">取消培训</Button> -->
            <!-- </div> -->
          </div>
        </i-col>
        <!-- 右侧信息 -->
        <i-col span="12" class="right">
          <div class="personList">
            <div class="listTitle">人员清单</div>
            <div class="listDetail">
              <Timeline>
                <TimelineItem v-for="(item,index) in personList" :key="index">
                  <span class="blueCircle" slot="dot"></span>
                  <div class="listDetail1">
                    <div>
                      <div class="listDetail-name">{{item.name}}</div>
                      <div class="listDetail-no">员工编号：{{item.agnetcode}}</div>
                    </div>
                    <div class="listDetailRight">
                      <div class="listDetail-img">
                        <img :src="item.icon" />
                      </div>
                      <div class="listDetail-no">{{item.name}}</div>
                    </div>
                  </div>
                </TimelineItem>
              </Timeline>
            </div>
          </div>
          <div class="relateFile">
            <div class="fileTitle">相关文件</div>
            <List border class="fileList" style="height:320px;overflow:auto">
              <div slot="header" class="fileContent">
                <span>文件名称</span>
                <span class="headerOperate">操作</span>
              </div>
              <ListItem v-for="item in file" :key="item">
                <ListItemMeta>
                  <span slot="description" style="color:#000">{{item.filename}}</span>
                </ListItemMeta>
                <template slot="action">
                  <li>
                    <span style="color:rgba(24, 144, 255, 1);cursor:pointer">
                      <span v-if="item.typeflag === '0'" @click="checkFile(item)">查看</span>
                      <span v-if="item.typeflag === '1'" @click="playVideo(item)">播放</span>
                    </span>
                  </li>
                </template>
              </ListItem>
            </List>
          </div>
          <Modal
            footer-hide="true"
            :value="videoModal"
            :mask-closable="true"
            @on-visible-change="modalVisibleChange2"
            :closable="false"
          >
            <span class="photoModal">
              <video :src="photoItem" controls id="video1" controlslist="nodownload"/>
            </span>
          </Modal>
        </i-col>
      </Row>
    </Card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      item: this.$route.query.item,
      // 培训结果清单表格数据
      resultColumns: [
        {
          title: "计划考核人数",
          key: "plannumber",
          width: "110",
          align: "center"
        },
        {
          title: "实际考核人数",
          key: "realnumber",
          width: "110",
          align: "center"
        },
        {
          title: "合格人数",
          key: "passnumber",
          width: "95",
          align: "center"
        },
        {
          title: "考核通过率",
          key: "passrate",
          width: "110",
          align: "center"
        },
        {
          title: "查看详情",
          key: "detail",
          minwidth: "95",
          align: "center",
          slot: "detail"
        }
      ],
      resultData: [],
      // 员工清单表格数据
      employeeColumns: [
        {
          title: "员工编号",
          key: "agentcode",
          width: "100",
          align: "center"
        },
        {
          title: "员工姓名",
          key: "name",
          width: "100",
          align: "center"
        },
        {
          title: "考核结果",
          key: "examResult",
          width: "100",
          align: "center"
        },
        {
          title: "考核结果",
          key: "score",
          minwidth: "100",
          align: "center"
        }
      ],
      employeeData: [],
      file: [],
      examModalValue: false,
      zhuzhuang: true,
      data1: [],
      flag: 0,
      chart1: "",
      baseInfo: "",
      personList: [],
      videoModal: false
    };
  },
  methods: {
    //变更培训
    linkToChange() {
      this.$router.push({
        name: "publishExamChange",
        query: {
          item: this.item
        }
      });
    },
    //取消培训
    cancelTrain() {

    },
    // 打开弹窗
    examModal() {
      this.examModalValue = true;
      this.initComponent();
    },

    // 关闭弹窗
    modalVisibleChange(value) {
      if (!value) {
        this.examModalValue = false;
      }
    },

    // 关闭视频弹窗
    modalVisibleChange2(value) {
      if (!value) {
        this.videoModal = false;
        let video1 = document.getElementById("video1");
        video1.pause();
      }
    },

    // 查看文件
    checkFile(item) {
      window.open(item.filepath+'#toolbar=0');
    },

    // 播放视频
    playVideo(item) {
      this.videoModal = true;
      this.photoItem = item.filepath;
    },

    // 考核明细柱形图
    initComponent() {
      if (this.flag === 0) {
        const Shape = G2.Shape;

        this.chart1 = new G2.Chart({
          container: "c1",
          width: 400,
          height: 300,
          padding: [30, 30, 30, 30]
        });

        this.chart1.source(this.data1);

        this.chart1.interval().position("type*value"); //将数据值映射到图形的位置上的方法。
        // .color("type"); // 对rate字段进行映射，使用内置颜色
        this.chart1.render();
        this.flag++;
      } else {
        this.chart1.changeData(this.data1);
      }
    },

    // 初始化页面
    initial() {
      this.api
        .selectTrainDetailone({ trainid: this.item.trainid })
        .then(res => {
          if (res.code == 200 && res.data != null) {
            this.baseInfo = res.data;
            this.resultData = [];
            if (res.data.uerTrainResultVO) {
              this.resultData.push(res.data.uerTrainResultVO);
            }
            this.resultData.forEach(element => {
              if (element.passrate == 0 || element.passrate) {
                element.passrate = element.passrate * 100 + "%";
              }
            });
            if (res.data.uerTrainUserVOS) {
              this.personList = res.data.uerTrainUserVOS;
            }
            if (res.data.uerTrainFileVOS) {
              this.file = res.data.uerTrainFileVOS;
            }
          }
        });
      this.api
        .selectUerTrainDetail({ trainid: this.item.trainid })
        .then(res => {
          if (res.code == 200 && res.data != null) {
            this.data1 = [];
            if (
              res.data.passnumber !== null &&
              res.data.nopassnumber !== null
            ) {
              this.data1.push({
                type: "通过",
                value: parseInt(res.data.passnumber)
              });
              this.data1.push({
                type: "不通过",
                value: parseInt(res.data.nopassnumber)
              });
              this.zhuzhuang = true;
            } else {
              this.zhuzhuang = false;
            }
            if (res.data.uerTrainUserScoreVOS) {
              this.employeeData = res.data.uerTrainUserScoreVOS;
              this.employeeData.forEach(element => {
                if (element.passflag) {
                  if (element.passflag === "0") {
                    element.examResult = "通过";
                  }
                  if (element.passflag === "1") {
                    element.examResult = "不通过";
                  }
                }
              });
            } else {
              this.employeeData = [];
            }
          }
        });
    }
  },
  mounted() {
    this.initial();
  },
  beforeDestroy() {
    this.item = null;
    this.resultColumns = null;
    this.resultData = null;
    this.employeeColumns = null;
    this.employeeData = null;
    this.file = null;
    this.examModalValue = null;
    this.zhuzhuang = null;
    this.flag = null;
    this.chart1 = null;
    this.baseInfo = null;
    this.personList = null;
    this.videoModal = null;
  }
};
</script>
<style scoped lang="less">
@import "./examDetail";
</style>

<style>
.ivu-list-bordered .ivu-list-header {
  background-color: rgba(24, 144, 255, 0.04);
  padding: 0px !important;
}
</style>